<template>
  <div class="mine">
    <van-nav-bar fixed @click-left="onClickLeft" @click-right="onClickRight">
      <van-icon name="user-o" slot="left" color="#fff"/>
      <van-icon name="chat-o" slot="right" color="#fff"/>
    </van-nav-bar>

    <div class="login-bg">
      <div v-if="this.$store.state.isLogin == false">
        <p>总产值 {{coinNow}}估值 ∨</p>
        <p>_ _ _</p>
      </div>
      <div v-else>
        <p @click="show=!show">总产值 {{coinNow}}估值 ∨</p>
        <p>{{coinNowMoney}}</p>
      </div>
    </div>

    <div class="login-content">
      <div v-if="this.$store.state.isLogin == false">
        <router-link :to="{name: 'login'}" tag="div" class="login-text">请登录/注册</router-link>
        <div class="income">
          <div class="income-out">
            <div>
              <p>请登录(BTC)</p>
              <p>_ _ _ _</p>
            </div>
            <div>
              <p>待收益(BTC)</p>
              <p>_ _ _ _</p>
            </div>
          </div>
          <div class="income-recharge">
            <div>
              <p>_ _ _ _</p>
              <p>可用余额({{coinNow}})</p>
            </div>
            <div>
              <span>充币</span>
              <span>提币</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="login-text">{{this.$store.state.userName}}</div>
        <div class="income">
          <div class="income-in">
            <div>
              <p>累计收益(BTC)</p>
              <p>0</p>
            </div>
            <div>
              <p>待收收益(BTC)</p>
              <p>0</p>
            </div>
          </div>
          <div class="income-recharge-in">
            <div>
              <p>{{coinNowMoney}}</p>
              <p>可用余额({{coinNow}})</p>
            </div>
            <div>
              <span @click="goChongBi">充币</span>
              <span @click="goTiBi">提币</span>
            </div>
          </div>
          <div class="income-mode">
            <div
              v-for="(item,index) in coinType"
              :key="index"
              @click="goFenBi(item.id,item.virtual_wallet_name)"
            >
              <img :src="item.img_url" alt>
              <p>{{item.virtual_wallet_name}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bg"></div>
      <div class="online">在线投资</div>
      <section class="cent">
        <van-cell title="活期计划" is-link :to="{name: 'currentPlan'}"></van-cell>
        <van-cell title="定期计划" is-link :to="{name: 'regularPlan'}"></van-cell>
      </section>
      <div class="bg"></div>
      <section class="cent">
        <van-cell title="资金记录" is-link :to="{name: 'capitalRecord'}"></van-cell>
        <van-cell title="邀友返利" is-link :to="{name: 'inviteRebate'}"></van-cell>
        <van-cell title="关于我们" is-link :to="{name: 'aboutus'}"></van-cell>
      </section>
    </div>

    <!-- 币种选择 -->
    <van-actionsheet v-model="show" :actions="actions" @select="onSelect"/>
  </div>
</template>
<script>
import { NavBar, Icon, Cell } from "vant";
import { coinType, coinAssets } from "../../axios/api.js";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Cell.name]: Cell
  },
  data() {
    return {
      coinNow: "",
      coinNowId: "234314",
      coinNowMoney: "",
      coinType: [],
      userName: "",
      show: false,
      actions: []
    };
  },
  mounted() {
    console.log(this.$store.state.isLogin);
  },
  created() {
    this.getCoinType();
    this.getLostMoney();
    this.getNowMoney();
  },
  methods: {
    //充币
    goChongBi(){
      this.$router.push({
        path:'/recharge',
        name:'recharge',
        params:{
          id:this.coinNowId
        }
      })
    },
    //提币
    goTiBi(){
      this.$router.push({
        path:'/turnOut',
        name:'turnOut',
        params:{
          id:this.coinNowId
        }
      })
    },
    //获取默认余额
    // getNowMoney() {
    //   var getCoins = {
    //     token: sessionStorage.getItem("token"),
    //     virtualWalletId: this.coinNowId
    //   };
    //   coinAssets({
    //     params: getCoins
    //   }).then(res => {
    //     console.log(res.data.data, 9999);
    //   });
    // },
    //获取余额
    getLostMoney() {
      var getCoins = {
        token: sessionStorage.getItem("token"),
        virtualWalletId: this.coinNowId
      };
      coinAssets({
        params: getCoins
      }).then(res => {
        console.log(res.data.data, 9999);
        if (res.data.data == null) {
          this.coinNowMoney = 0;
        } else {
          this.coinNowMoney = res.data.data.available_amount;
        }
      });
    },
    // 币种菜单
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false;
      console.log(item);
      (this.coinNow = item.name),
        (this.coinNowId = item.id),
        this.getLostMoney(this.coinNowId);
      console.log(this.coinNowId);
    },
    onClickLeft() {
      //进入用户中心
      this.$router.push("/userCenter");
    },
    onClickRight() {
      //进入消息中心
      this.$router.push("/news");
    },
    getCoinType() {
      //获取币分类列表
      var that = this;
      coinType()
        .then(res => {
          console.log(res.data);
          that.coinType = res.data.data;
          that.actions = res.data.data;

          for (var i = 0; i < res.data.data.length; i++) {
            (that.actions[i].name = res.data.data[i].virtual_wallet_name),
              (that.actions[i].dataId = i);
          }
          that.coinNow = that.actions[1].name;
          that.coinNowId = that.actions[1].id;
          that.coinNowMoney = that.actions[1].id
        })
        .catch(function(err) {});
    },

    // 进入分币
    goFenBi(id, title) {
      this.$router.push({
        path: "deal",
        name: "deal",
        params: {
          id: id,
          title: title
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
.mine {
  height: 100%;
  margin-bottom: 70px;
  background: @base_background;
  overflow: hidden;
  .van-hairline--bottom::after {
    border-bottom-width: 0;
  }
  .van-icon, .van-icon::before{
    color: #E5BF86;
  }
  .van-nav-bar {
    background: #000;
    .van-nav-bar__left,
    .van-nav-bar__right {
      font-size: 18px;
    }  
  }
  .login-bg {
    margin-top: 45px;
    height: 160px;
    background: #000;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    text-align: left;
    padding: 0 25px;
    box-sizing: border-box;
    font-size: 14px;
    color: #E5BF86;
    > p:nth-child(2) {
      border-bottom: 1px solid #eee;
      padding: 4px 0;
    }
  }
  .login-content {
    width: 100%;
    margin-top: -180px;
    .login-text {
      width: 40%;
      font-size: 20px;
      color:#E5BF86;
      text-align: left;
      margin: 70px 25px 20px;
    }
    .income {
      width: 90%;
      margin: 0 auto;
      background: @base_background;
      border-radius: 10px;
      overflow: hidden;
      //border: 1px solid red;
      > .income-out,
      > .income-in {
        width: 100%;
        height: 68px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: url("../../assets/images/card-colour.png") no-repeat center
          center;
        background-size: 110%;
        border-radius: 10px;
        > div {
          width: 50%;
          color: #fff;
          font-size: @base_textSize;
        }
        > div:first-of-type {
          border-right: 1px solid #fff;
        }
      }
      > .income-recharge,
      .income-recharge-in {
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: @base_textSize;
        > div {
          width: 50%;
        }
        div:nth-child(1) {
          margin-left: 10px;
          text-align: left;
          p:nth-child(1) {
            color: @base_textColor;
            margin-bottom: 4px;
          }
          p:nth-child(2) {
            color: @base_nine;
          }
        }
        div:nth-child(2) {
          display: flex;
          justify-content: center;
          align-items: center;
          span:nth-child(1) {
            display: inline-block;
            padding: 6px 12px;
            background-color: #d4a96d;
            border-radius: 20px;
            color: #fff;
            margin-right: 20px;
          }
          span:nth-child(2) {
            display: inline-block;
            padding: 6px 12px;
            border: 1px solid #d4a96d;
            border-radius: 20px;
            color: #d4a96d;
          }
        }
      }
      > .income-recharge-in {
        height: auto;
        padding: 16px 0;
      }
      .income-mode::-webkit-scrollbar {
        background-color: transparent;
      }
      > .income-mode {
        display: -webkit-box;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        > div {
          width: 70px;
          > img {
            width: 60%;
          }
          p {
            font-size: @base_textSize;
            color: @base_textColor;
          }
        }
      }
    }
    .bg {
      height: 10px;
      background: #f2f3f5;
    }
    .online {
      text-align: left;
      font-size: @base_textSize;
      font-weight: bold;
      color: @base_textColor;
      border-bottom: 1px solid #ebedf0;
      background: @base_background;
      padding: 10px;
    }
    .van-cell:not(:last-child)::after {
      left: 0;
    }
    .van-cell__title {
      text-align: left;
    }
  }
}
</style>

